<template>
  <div class="scan" style="text-align:center">
    <div v-if="scanning">
      <div class="searchbox">
        <div class="circle"></div>
        <div class="handle"></div>
      </div>
      <div style="margin: 10px auto">文档扫描中...</div>
    </div>
    <div class="searchbtn" v-else>
      <el-button
        icon="el-icon-search"
        size="medium"
        @click="handleScan"
        circle
      ></el-button>
      <div style="margin: 10px auto">点击启动文档扫描...</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DocumentScan",
  data() {
    return {
      scanning: false,
    };
  },
  methods: {
    handleScan() {
      this.scanning = true;
    },
  },
};
</script>

<style scoped>
.searchbtn {
  padding: 40px;
  width: 50%;
  margin: auto;
  color: darkgray;
}

.el-button--medium {
  font-size: 2em;
}

.el-button--medium.is-circle {
  padding: 30px;
}

.searchbox {
  width: 50%;
  margin: auto;
  animation: scan-anim 3s linear infinite;
}

.circle {
  margin: auto;
  width: 100px;
  height: 100px;
  border: 1em solid;
  border-radius: 50%;
  border-color: rebeccapurple;
}

.handle {
  margin: auto;
  position: relative;
  width: 1em;
  height: 80px;
  background-color: cadetblue;
  transform: rotate(-45deg);
  left: 72px;
  top: -30px;
}

@keyframes scan-anim {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(40px, 0);
  }
  50% {
    transform: translate(40px, 40px);
  }
  75% {
    transform: translate(0, 40px);
  }
}
</style>